<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>注册页</title>
<%--    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">--%>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css">
    <script src="${pageContext.request.contextPath}/js/jquery-3.6.0.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
    <!-- Bootstrap -->
<%--    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.css"/>--%>
    <%--引入echarts--%>

    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/index.css">
</head>
<style type="text/css">
    form {
        margin-top: 20px;
        background-color: #cbe4ff;
        border-radius: 10px;
        padding: 60px;
    }

    form > div {
        width: 700px;
    }

    form > div > div > select {
        height: 33px;
    }

    form > div > label {
        margin-left: 30px;
        width: 200px;
    }

    #code {
        font-family: Arial;
        font-style: italic;
        font-weight: bold;
        border: 0;
        letter-spacing: 2px;
        color: blue;
    }
</style>
<body>
<div class="">
    <%--headerstart头部--%>
    <%@ include file="../pub/header.jsp" %>
    <%--headerend头部--%>
    <!--regist注册开始-->
    <div style="margin-top: 100px;width: 800px;margin: auto;">
        <form class="form-horizontal" role="form">
            <div class="form-group">
                <label class="col-sm-3 control-label" for="name">
                    用户名称:
                </label>
                <div class="col-sm-6">
                    <input class="form-control" id="name" name="name" type="text" value=""
                           placeholder="★长度为6~18个任意字符">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label" for="passWord">
                    登录密码:
                </label>
                <div class="col-sm-6">
                    <input class="form-control" id="passWord" name="passWord" type="password" value=""
                           placeholder="★必须包含大写字母、小写字母和数字,长度为6-20个字符">
                </div>
            </div>
            <%--<div class="form-group">
                <label class="col-sm-3 control-label" for="realName">
                    真实名称:
                </label>
                <div class="col-sm-6">
                    <input class="form-control" id="realName" name="realName" type="text" value=""
                           placeholder="★真实名称">
                </div>
            </div>--%>
            <hr style="border-color: #2b2b2b">
            <div class="form-group">
                <label class="col-sm-3 control-label" for="idCard">
                    身份证号:
                </label>
                <div class="col-sm-6">
                    <input class="form-control" id="idCard" name="idCard" type="text" value=""
                           placeholder="★身份证号">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label" for="sex">
                    性别:
                </label>
                <div class="col-sm-6">
                    <input class="form-control" id="sex" name="sex" type="text" value=""
                           placeholder="★性别">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label" for="email">
                    电子邮箱:
                </label>
                <div class="col-sm-6">
                    <input class="form-control" id="email" name="email" type="text" value=""
                           placeholder="★电子邮箱">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label" for="address">
                    地址:
                </label>
                <div class="col-sm-6">
                    <input class="form-control" id="address" name="address" type="text"
                           value="" placeholder="★地址">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label" for="telephone">
                    手机号码:
                </label>
                <div class="col-sm-6">
                    <input class="form-control" id="telephone" name="telephone" type="text" value=""
                           placeholder="★手机号码">
                </div>
            </div>
            <%--<div class="form-group">
                <label class="col-sm-3 control-label" for="tel">
                    固话号码:
                </label>
                <div class="col-sm-6">
                    <input class="form-control" id="tel" name="tel" type="text" value=""
                           placeholder="★固话号码">
                </div>
            </div>--%>
            <%--<hr style="border-color: #2b2b2b">--%>
            <%--<div class="form-group">
                <label class="col-sm-3 control-label" for="postCard">
                    邮政编码:
                </label>
                <div class="col-sm-6">
                    <input class="form-control" id="postCard" name="postCard" type="text" value=""
                           placeholder="★邮政编码">
                </div>
            </div>--%>
            <%--<div class="form-group">
                <label class="col-sm-3 control-label" for="type">
                    类别:
                </label>
                <div class="col-sm-6">
                    <input class="form-control" id="type" name="type" type="text" value=""
                           placeholder="★类别">
                </div>
            </div>--%>
            <%--<div class="form-group">
                <label class="col-sm-3 control-label" for="cardType">
                    证件类型:
                </label>
                <div class="col-sm-6">
                    <input class="form-control" id="cardType" name="cardType" type="text"
                           value="" placeholder="★证件类型">
                </div>
            </div>--%>
            <%--<div class="form-group">
                <label class="col-sm-3 control-label" for="registCard">
                    注册号:
                </label>
                <div class="col-sm-6">
                    <input class="form-control" id="registCard" name="registCard" type="text"
                           value="" placeholder="★注册号">
                </div>
            </div>--%>
            <%--<div class="form-group">
                <label class="col-sm-3 control-label" for="registCardType">
                    注册号类型:
                </label>
                <div class="col-sm-6">
                    <input class="form-control" id="registCardType" name="registCardType" type="text"
                           value="" placeholder="★注册号类型">
                </div>
            </div>--%>
            <%--<div class="form-group">
                <label class="col-sm-3 control-label" for="registTime">
                    注册时间:
                </label>
                <div class="col-sm-6">
                    <input class="form-control" id="registTime" name="registTime" type="datetime-local"
                           value="" placeholder="★注册时间">
                </div>
            </div>--%>
            <%--<div class="form-group">
                <label class="col-sm-3 control-label" for="companyName">
                    公司名称:
                </label>
                <div class="col-sm-6">
                    <input class="form-control" id="companyName" name="companyName" type="text"
                           value="" placeholder="★公司名称">
                </div>
            </div>--%>
            <%--<div class="form-group">
                <label class="col-sm-3 control-label" for="workTel">
                    单位联系电话:
                </label>
                <div class="col-sm-6">
                    <input class="form-control" id="workTel" name="workTel" type="text"
                           value="" placeholder="★单位联系电话">
                </div>
            </div>--%>
            <%--<div class="form-group">
                <label class="col-sm-3 control-label" for="workPostCard">
                    单位地址邮编:
                </label>
                <div class="col-sm-6">
                    <input class="form-control" id="workPostCard" name="workPostCard" type="text"
                           value="" placeholder="★注册单位地址邮编号">
                </div>
            </div>--%>
            <%--<div class="form-group">
                <label class="col-sm-3 control-label" for="getVerifyCode">
                    获取验证码:
                </label>
                <div class="col-sm-6">
                    <input class="form-control" id="getVerifyCode" name="getVerifyCode" type="text"
                           value="" placeholder="★获取验证码">
                </div>
            </div>--%>
            <%--<div class="form-group">
                <label class="col-sm-3 control-label" for="userType">
                    办理人:
                </label>
                <div class="col-sm-6">
                    <select class="form-control" id="userType" name="userType">
                        <option selected>★办理人</option>
                        <option selected>★企业</option>
                        <option selected>★个人</option>
                    </select>
                </div>
            </div>--%>
            <%--<div class="form-group">
                <label class="col-sm-3 control-label" for="options">
                    审核意见:
                </label>
                <div class="col-sm-6">
                    <input class="form-control" id="options" name="options" type="text"
                           value="" placeholder="★审核意见">
                </div>
            </div>--%>
            <%--<div class="form-group">
                <label class="col-sm-3 control-label" for="isDel">
                    是否删除:
                </label>
                <div class="col-sm-6">
                    <select class="form-control" id="isDel" name="isDel">
                        <option selected>★是否删除</option>
                        <option selected>★1已删除</option>
                        <option selected>★0未删除</option>
                    </select>
                </div>
            </div>--%>
            <%--<div class="form-group">
                <label class="col-sm-3 control-label" for="exchangeTime">
                    数据交换时间戳:
                </label>
                <div class="col-sm-6">
                    <input class="form-control" id="exchangeTime" name="exchangeTime" type="text"
                           value="" placeholder="★数据交换时间戳">
                </div>
            </div>--%>
            <%--<div class="form-group">
                <label class="col-sm-3 control-label" for="companyType">
                    申报单位类型:
                </label>
                <div class="col-sm-6">
                    <input class="form-control" id="companyType" name="companyType" type="text"
                           value="" placeholder="★申报单位类型">
                </div>
            </div>--%>
            <%--<div class="form-group">
                <label class="col-sm-3 control-label" for="companyAddr">
                    申报单位地址:
                </label>
                <div class="col-sm-6">
                    <input class="form-control" id="companyAddr" name="companyAddr" type="text"
                           value="" placeholder="★申报单位地址">
                </div>
            </div>--%>

            <div class="form-group">
                <label class="col-sm-3 control-label" for="code" >
                    验证码:
                </label>
                <div class="col-sm-3">
                    <input class="form-control" id="verificationCode" type="" value="" placeholder="大小写严格区分">
                </div>
                <div class="col-sm-2">
                    <input class="form-control" id="code" type="button" value=""
                           style="font-size: 20px;background-color: #a2a5a8">
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-2">
                    <input class="form-control" type="button" value="提交" onclick="submitForm()"
                           style="background-color: #1a3eb4;color: white;margin-left: 280px">
                </div>
            </div>
        </form>
    </div>
    <!--regist注册结束-->

    <!--footer开始-->
    <%@include file="../pub/footer.jsp" %>
    <!--footer结束-->
</div>
<script src="${pageContext.request.contextPath}/js/md5.js"></script>
<script>
    /*$(document).ready(function (e) {
        createCode();
        changeCode();
        $("#codeImg1").bind("click", changeCode);
    });*/

    window.onload = function () {
        createCode();
    };
    $("#code").click(function () {
        $("#code").css({"backgroundColor": "pink"})
        createCode();
    });

    var code;

    function createCode() {
        code = "";
        var codeLength = 4;
        var checkCode = document.getElementById("code");
        var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
            'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z',
            'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z');
        for (var i = 0; i < codeLength; i++) {
            var index = Math.floor(Math.random() * 62);
            code += random[index];
        }
        checkCode.value = code;
    }

    function submitForm() {
        var verificationCode = $('#verificationCode').val();
        var code = $('#code').val();
        console.log(verificationCode);
        console.log(code);
        if (!check()) {
            return;
        } else if (verificationCode == code) {
            submitForm1();
            return;
        }
        alert("验证码输入有误！！！请注意此处严格区分大小写");
    }

    function submitForm1() {
        var name = $('#name').val();
        var passWord = $('#passWord').val();
        passWord=md5(passWord);
        console.log(passWord)
        //var realName = $('#realName').val();
        var idCard = $('#idCard').val();
        var sex = $('#sex').val()
        var email = $('#email').val()
        var address = $('#address').val();
        var telephone = $('#telephone').val();
        //var tel = $('#tel').val();
        //var postCard = $('#postCard').val();
        // var type = $('#type').val();
        // var verifyCode = $('#verifyCode').val();
        // var cardType = $('#cardType').val();
        //var registCard = $('#registCard').val();
        // var registCardType = $('#registCardType').val();
        //var registTime = $('#registTime').val();
        // var companyName = $('#companyName').val();
        // var workTel = $('#workTel').val();
        // var workPostCard = $('#workPostCard').val();
        // var getVerifyCode = $('#getVerifyCode').val();
        // var userType = $('#userType').val();
        // var options = $('#options').val();
        // var exchangeTime = $('#exchangeTime').val();
        // var isDel = $('#isDel').val();
        // var companyType = $('#companyType').val();
        // var companyAddr = $('#companyAddr').val();
        $.ajax({
            type: 'post',
            url: '${pageContext.request.contextPath}/user/regist',
            data: {
                "name": name,
                "password": passWord,
                //"realName": realName,
                "idCard": idCard,
                "sex": sex,
                "email": email,
                "address": address,
                "telephone": telephone,
                //"tel": tel,
                //"postCard": postCard,
                //"type": type,
                //"verifyCode": verifyCode,
                //"cardType": cardType,
                //"registCardType": registCardType,
                //"registCard": registCard,
                //"registTime": registTime,
                //"companyName": companyName,
                //"workTel": workTel,
                //"workPostCard": workPostCard,
                //"getVerifyCode": getVerifyCode,
                //"userType": userType,
                //"options": options,
                //"exchangeTime": exchangeTime,
                //"isDel": isDel,
                //"companyType": companyType,
                //"companyAddr": companyAddr,
            },
            success: function (result) {
                if (result.flag == 0) {
                    alert(result.msg);//msg:此手机用户账号已经存在!!!
                    return;
                } else {
                    alert(result.msg);
                    window.location.href = "${pageContext.request.contextPath}/index";
                }
            }
        });
    }

    function check() {
        var name = $('#name').val();
        var passWord = $('#passWord').val();

        // passWord=md5(passWord);
        // console.log(passWord)
        //var realName = $('#realName').val();
        var idCard = $('#idCard').val();
        var sex = $('#sex').val()
        var email = $('#email').val()
        var address = $('#address').val();
        var telephone = $('#telephone').val();
        //var tel = $('#tel').val();
        //var postCard = $('#postCard').val();
        //var type = $('#type').val();
        //var verifyCode = $('#verifyCode').val();
        //var cardType = $('#cardType').val();
        //var registCard = $('#registCard').val();
        //var registCardType = $('#registCardType').val();
        //var registTime = $('#registTime').val();
        //var companyName = $('#companyName').val();
        // var workTel = $('#workTel').val();
        // var workPostCard = $('#workPostCard').val();
        // var getVerifyCode = $('#getVerifyCode').val();
        // var userType = $('#userType').val();
        // var options = $('#options').val();
        // var exchangeTime = $('#exchangeTime').val();
        // var isDel = $('#isDel').val();
        // var companyType = $('#companyType').val();
        // var companyAddr = $('#companyAddr').val();

        //let reg = /^(.){3,10}$/;
        //var names = reg.test(name);

        let reg5 = /^(?=.*[0-9].*)(?=.*[A-Z].*)(?=.*[a-z].*).{6,20}$/;
        var password = reg5.test(passWord);

        let reg2 = /^[1-9]\d{5}[12]\d{3}(0[1-9]|1[012])(0[1-9]|1\d|2\d|3[01])\d{3}(\d|X)$/;
        var idCard = reg2.test(idCard);

        let reg3 = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
        var emails = reg3.test(email);

        let reg4 = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;
        var telephones = reg4.test(telephone);

        //let reg6 = /^([a-zA-Z0-9]{6,12})$/;
        //var registcard = reg6.test(registCard);

        if (name == null || name == '') {
            alert("用户名输入有误！！！")
            $("#name").css({"border":"1px solid red"})
            return false;
        } else if (passWord == null || passWord == '' || password == false) {
            $("#passWord").css({"border":"1px solid red"})
            alert("密码输入有误！！！")
            return false;
        } /*else if (realName == null || realName == '') {
            alert("请完整填写表格内容")
            return false;
        } */ else if (idCard == null || idCard == '' || idCard == false) {
            $("#idCard").css({"border":"1px solid red"})
            alert("身份证号输入有误！！！")
            return false;
        } else if (sex == null || sex == '') {
            $("#sex").css({"border":"1px solid red"})
            alert("请完整填写表格内容")
            return false;
        } else if (email == null || email == '' || emails == false) {
            $("#email").css({"border":"1px solid red"})
            alert("邮箱输入有误！！！")
            return false;
        } else if (address == null || address == '') {
            $("#address").css({"border":"1px solid red"})
            alert("请完整填写表格内容")
            return false;
        } else if (telephone == null || telephone == '' || telephones == false) {
            $("#telephone").css({"border":"1px solid red"})
            alert("电话号输入有错误！！！")
            return false;
        }/* else if (tel == null || tel == '') {
            alert("请完整填写表格内容")
            return false;
        }*//* else if (registCard == null || registCard == '' || registcard == false) {
            alert("注册账号格式错误！！！")
            return false;
        }*/ /*else if (registTime == null || registTime == '') {
            alert("请完整填写表格内容")
            return false;
        }*/ else {
            return true;
        }

    }
</script>
</body>
</html>